
import React, { useRef, useEffect, useLayoutEffect, useState } from 'react';
import { connect } from 'react-redux'
import {
    Space
} from 'antd';
// import ReactEcharts from 'echarts-for-react';
import request from '../../../utils/request';
import * as echarts from 'echarts';

function Line(props) {
    const [source, setSource] = useState([])
    useLayoutEffect(() => {
        request.get('/list/yeartoclass').then(res => {
            console.log(res.data.movieCount);
            let a = res.data.movieCount
            const data = [['score', 'amount', 'product'], ...a]
            setSource(data)
            console.log(data);
        })
    }, [])
    // console.log(data);
    const dom = useRef();
    useEffect(() => {
        if (!dom.current) {
            dom.current = echarts.init(document.getElementById('chart'));
        }
        console.log(dom.current, 'current');
        dom.current.setOption({
            dataset: {
                source,
                // source: [
                //   ['score', 'amount', 'product'],
                //   [89.3, 58212, 'Matcha Latte'],
                //   [57.1, 78254, 'Milk Tea'],
                //   [74.4, 41032, 'Cheese Cocoa'],
                //   [50.1, 12755, 'Cheese Brownie'],
                //   [89.7, 20145, 'Matcha Cocoa'],
                //   [68.1, 79146, 'Tea'],
                //   [19.6, 91852, 'Orange Juice'],
                //   [10.6, 101852, 'Lemon Juice'],
                //   [32.7, 20112, 'Walnut Brownie']
                // ]
            },
            grid: { containLabel: true },
            xAxis: { name: 'amount' },
            yAxis: { type: 'category' },
            visualMap: {
                orient: 'horizontal',
                left: 'center',
                min: 10,
                max: 100,
                text: ['High Score', 'Low Score'],
                // Map the score column to color
                dimension: 0,
                inRange: {
                    color: ['#65B581', '#FFCE34', '#FD665F']
                }
            },
            series: [
                {
                    type: 'bar',
                    encode: {
                        // Map the "amount" column to X axis.
                        x: 'amount',
                        // Map the "product" column to Y axis
                        y: 'product'
                    }
                }
            ]
        })
    }, [source]);

    return (
        <div>

            <Space>
                <div id='chart' style={{
                    width: '50vw',
                    height: '50vh'
                }}>

                </div>
            </Space>
        </div>
    );
}

export default Line